<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap进度条和媒体对象</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <!--<link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>-->
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!--<link href="../css/starter-template.css" rel="stylesheet">-->
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>


</head>
<body>

<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<div class="container">
    <div class="row">

        <!-- 进度条 -->
        <h1>文档示例进度条</h1>
        在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性。<br/>
        1.设置sr-only 属性, 进度条上不显示字体。
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                 style="width: 60%;">
                <span class="">已完成60%</span>
            </div>
        </div>
        2.
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="min-width: 8%;">已完成1%</div>
        </div>
        <hr/>
        <h1>基本进度条样式</h1>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 45%;">45%</div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 45%">45%</div>
        </div>
        <!-- 带动画效果的条纹进度条  (动画效果用属性：active) -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" style="width: 70%">70%</div>
        </div>
        <!-- 带颜色的条纹进度条 -->
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 60%"></div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 45%"></div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 45%"></div>
        </div>
        <hr/>
        <h1>堆叠进度条样式:也可以做比例图</h1>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 15%">15%</div>
            <div class="progress-bar progress-bar-success" style="width: 25%">25%</div>
            <div class="progress-bar progress-bar-info" style="width: 25%">25%</div>
            <div class="progress-bar progress-bar-striped active" style="width: 30%">30%</div>
        </div>
        <hr/>
        <hr/>
        <hr/>
        <!-- 媒体对象 -->
        <h2>媒体对象 media (代表要开始做：图文混排)</h2>
        <h5>这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。</h5>

        <h2>默认样式</h2>
        <div class="media">
            <!-- media-left 图片放左边 -->
            <div class="media-left">
                <a href="#">
                    <!-- 指定媒体对象 图片，视频等  media-object -->
                    <img style="width: 100px;height: 100px;" class="media-object" src="../img/1.jpg" alt="照片提示">
                </a>
            </div>
            <!-- media-body： 文字存放地 -->
            <div class="media-body">
                <h4 class="media-heading">标题</h4>
                <p>这里是内容：这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                <br/>
            </div>
        </div>
        <hr/>

        <h2>对齐样式</h2>
        <div class="media">
            <div class="media-left media-middle">
                <a href="#">
                    <img class="media-object" src="../img/0.jpg" alt="照片提示">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">标题</h4>
                <p>这里是内容：这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
            </div>
        </div>
        <hr/>

        <h2>媒体对象列表</h2>
        <ul class="media-list">
            <li class="media">
                <div class="media-body">
                    <h4 class="media-heading">标题</h4>
                    <p>这里是内容：这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                </div>
                <div class="media-right">
                    <a href="#">
                        <img style="width: 100px;height: 100px;" class="media-object" src="../img/1.jpg" alt="照片提示">
                    </a>
                </div>
            </li>
            <li class="media">
                <div class="media-body">
                    <h4 class="media-heading">标题</h4>
                    <p>这里是内容：这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容</p>
                </div>
                <div class="media-right">
                    <a href="#">
                        <img style="width: 100px;height: 100px;" class="media-object" src="../img/1.jpg" alt="照片提示">
                    </a>
                </div>
            </li>
        </ul>
        <hr/>


        <hr/>
        <hr/>
        <hr/>
    </div>
</div>
</body>
</html>